import React, { Component } from 'react'

// 没有任何和redux相关的，只负责展示的组件叫ui组件
export default class Count extends Component {
    state = {
        numInput: ''
    }


    // 处理输入的函数
    numInput = ( event ) => {
        this.setState({ numInput: event.target.value });
    }

    // 处理加法的函数
    increatment = () => {
        let numInput = this.state.numInput
        this.props.jia( numInput )
    }


    // 处理减法的函数
    decreatment = () => {
        let numInput = this.state.numInput
        this.props.jian( numInput )
    }

    increatmentIfOdd = () => {
        let numInput = this.state.numInput
        if( this.props.count % 2 !== 0 ){
            this.props.jia( numInput )
        }
        
    }


    increatmentAsync = () => {
        let numInput = this.state.numInput
        this.props.jiaAsync( numInput, 500 )
    }

    render() {
        return (
            <div>
                <h1>当前值为{ this.props.count }</h1>
                <input type="text" onChange={ this.numInput }/>
                <button onClick={ this.increatment }>+</button>
                <button onClick={ this.decreatment }>-</button>
                <button onClick={ this.increatmentIfOdd }>increatmentIfOdd</button>
                <button onClick={ this.increatmentAsync }>increatmentAsync</button>
            </div>
        )
    }
}
